<template>
  <div id="app">
    <div style="position: relative">
      <p
        style="color: #409eff; font-size: 14px; margin-bottom: 15px"
        @click="fanhui"
      >
        返回
      </p>
      <div class="spe"></div>
      <span class="tit">房号信息</span>
    </div>
    <div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row :gutter="20">
          <!-- gutter 用于设置列之间的间距 -->
          <el-col :span="12">
            <!-- 每列占 12 份，即一行两列 -->
            <el-form-item label="单元名称" prop="unitname">
              <el-input v-model="ruleForm.unitname" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="幢号" prop="unitnum">
              <el-input v-model="ruleForm.buildnum"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="楼层号" prop="storeynum">
              <el-input v-model="ruleForm.storeynum"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="房号" prop="homenum">
              <el-input v-model="ruleForm.homenum"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="住客姓名" prop="homename">
              <el-input
                v-model="ruleForm.homename"
                @focus="handleFocus"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="homestatus">
              <el-select v-model="ruleForm.homestatus" placeholder="请选择">
                <el-option label="已入住" :value="1"></el-option>
                <el-option label="未入住" :value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col>
            <el-tooltip
              class="custom-tooltip"
              effect="light"
              placement="top"
              :with="50"
            >
              <div slot="content" class="tooltip-content">
                可填写房屋的详细信息介绍：<br />
                1.房屋的基本信息<br />
                2.房屋的成员信息<br />
                3.房屋的设备信息<br />
                4.房屋未来的规划填报
              </div>
              <i class="el-icon-question custom-icon"></i>
            </el-tooltip>
            <el-form-item label="房屋信息" prop="homemessage" class="form-item">
              <el-input
                type="textarea"
                v-model="ruleForm.homemessage"
                :rows="6"
                maxlength="100"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col>
            <el-tooltip
              class="custom-tooltip"
              effect="light"
              placement="top"
              :with="50"
            >
              <div slot="content" class="tooltip-content">
                可对家庭成员的信息实时录入：<br />
                1.家庭的主要成员<br />
                2.家庭的主要成员的信息填报<br />
                3.家庭成员的健康信息状况<br />
                4.家庭成员每日健康体温检测填写
              </div>
              <i class="el-icon-question custom-icon"></i>
            </el-tooltip>
            <el-form-item
              label="家庭成员"
              prop="homesuggestion"
              class="form-item"
            >
              <el-input
                type="textarea"
                v-model="ruleForm.homesuggestion"
                :rows="6"
                maxlength="100"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div style="position: relative">
      <div class="spe"></div>
      <span class="tit">智能设备</span>
    </div>
    <div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row :gutter="20">
          <!-- gutter 用于设置列之间的间距 -->
          <el-col :span="12">
            <!-- 每列占 12 份，即一行两列 -->
            <el-form-item label="洗衣机数量" prop="washnum">
              <el-input v-model="ruleForm.washnum"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="WI-FI名称" prop="wifiname">
              <el-input v-model="ruleForm.wifiname"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="空调数量" prop="airnum">
              <el-input v-model="ruleForm.airnum"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="智能设备状态" prop="smartstatus">
              <el-select v-model="ruleForm.smartstatus" placeholder="请选择">
                <el-option label="完好" :value="1"></el-option>
                <el-option label="待维修" :value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div style="position: relative">
      <div class="spe"></div>
      <span class="tit">家居设备</span>
    </div>
    <div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row :gutter="20">
          <!-- gutter 用于设置列之间的间距 -->
          <el-col :span="12">
            <!-- 每列占 12 份，即一行两列 -->
            <el-form-item label="书桌数量" prop="homedesk">
              <el-input v-model="ruleForm.homedesk"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="椅子数量" prop="homechair">
              <el-input v-model="ruleForm.homechair"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="衣橱数量" prop="homeclothes">
              <el-input v-model="ruleForm.homeclothes"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="家居设备状态" prop="familystatus">
              <el-select v-model="ruleForm.familystatus" placeholder="请选择">
                <el-option label="完好" :value="1"></el-option>
                <el-option label="待维修" :value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="btns" style="text-align: right">
      <el-button type="success" @click="baocun">保存</el-button>
      <el-button type="primary" @click="fanhui">返回</el-button>
    </div>

    <!-- 遮罩 -->
    <div class="zhezhao" v-show="zhezhao == 1">
      <div class="box">
        <p
          style="
            padding: 20px;
            font-size: 20px;
            color: #303133;
            font-weight: bolder;
          "
        >
          住客姓名
        </p>
        <div style="margin-left: 20px">
          <el-radio v-model="radio" label="1">自定义</el-radio>
          <el-radio v-model="radio" label="2">复制</el-radio>
        </div>
        <div v-if="radio === '1'" style="margin: 20px 15px">
          <el-input v-model="homename"></el-input>
        </div>
        <div v-if="radio === '2'" class="copy-page">
          <el-input v-model="homename" placeholder="请输入用户账号"></el-input>
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
          <div>
            <el-table
              :data="tableData"
              border
              style="width: 100%"
              header-cell-class-name="custom-header"
            >
              <el-table-column prop="date" label="日期" width="180">
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="180">
              </el-table-column>
              <el-table-column prop="address" label="地址"> </el-table-column>
            </el-table>
          </div>
        </div>

        <div style="text-align: right; margin-right: 20px">
          <el-button type="primary" @click="quxiao">取消</el-button>
          <el-button type="primary" @click="queding">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        unitname: "", // 单元名称
        unitnum: "", // 幢号
        storeynum: "", // 楼层号
        homenum: "", // 房号
        homename: "", // 住客姓名
        homestatus: 0, // 状态
        homemessage: "", // 房屋信息
        homesuggestion: "", // 家庭成员
        washnum: "", // 洗衣机数量
        wifiname: "", // WI-FI 名称
        airnum: "", // 空调数量
        smartstatus: "", // 智能设备状态
        homedesk: "", // 书桌数量
        homechair: "", // 椅子数量
        homeclothes: "", // 衣橱数量
        familystatus: "", // 家居设备状态
        buildnum: "",
      },
      homename: "",
      zhezhao: 0,
      rules: {
        // 单元名称
        unitname: [
          { required: true, message: "单元名称不能为空", trigger: "blur" },
        ],
        // 幢号
        unitnum: [{ required: true, message: "幢号不能为空", trigger: "blur" }],
        // 楼层号
        storeynum: [
          { required: true, message: "楼层号不能为空", trigger: "blur" },
        ],
        // 房号
        homenum: [{ required: true, message: "房号不能为空", trigger: "blur" }],
        // 住客姓名
        homename: [
          { required: true, message: "住客姓名不能为空", trigger: "blur" },
        ],
        // 状态
        homestatus: [
          { required: true, message: "请选择状态", trigger: "change" },
        ],
        // 洗衣机数量
        washnum: [
          { required: true, message: "洗衣机数量不能为空", trigger: "blur" },
        ],
        // WI-FI 名称
        wifiname: [
          { required: true, message: "WI-FI 名称不能为空", trigger: "blur" },
        ],
        // 空调数量
        airnum: [
          { required: true, message: "空调数量不能为空", trigger: "blur" },
        ],
        // 智能设备状态
        smartstatus: [
          { required: true, message: "智能设备状态不能为空", trigger: "blur" },
        ],
        // 书桌数量
        homedesk: [
          { required: true, message: "书桌数量不能为空", trigger: "blur" },
        ],
        // 椅子数量
        homechair: [
          { required: true, message: "椅子数量不能为空", trigger: "blur" },
        ],
        // 衣橱数量
        homeclothes: [
          { required: true, message: "衣橱数量不能为空", trigger: "blur" },
        ],
        // 家居设备状态
        familystatus: [
          { required: true, message: "家居设备状态不能为空", trigger: "blur" },
        ],
      },

      radio: "1",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取数据
    async getList() {
      let a = await this.$axios.get(
        "http://community.byesame.com/house/getDetailId?id=" +
          this.$route.query.id +
          "&token=" +
          localStorage.getItem("token")
      );

      // 获取返回的数据
      const responseData = a.data[0];
      // 遍历 responseData 的键
      for (const key in responseData) {
        // 如果 ruleForm 中存在该键，则更新值
        if (key in this.ruleForm) {
          this.ruleForm[key] = responseData[key];
        }
      }
    },

    // 保存
    async baocun() {
      console.log(this.ruleForm);
      let a = await this.$axios.post(
        "http://community.byesame.com/house/updatenumList",
        {
          buildnum: this.ruleForm.buildnum,
          ...this.ruleForm,
          homeaddress: "",
          h_id: this.$route.query.id,
          id: this.$route.query.id,
          token: localStorage.getItem("token"),
        }
      );
      // this.$message({
      //   type: "success",
      //   message: "更新成功!",
      // });
      this.$router.push({
        path: "/house/number",
      });
    },
    // 返回
    fanhui() {
      this.$router.push("/house/number");
    },

    // 确定
    queding() {
      this.ruleForm.homename = this.homename;
      this.zhezhao = 0;
    },
    // 取消
    quxiao() {
      this.zhezhao = 0;
    },

    handleFocus() {
      this.zhezhao = 1;
    },
  },
};
</script>

<style>
.tit {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  margin-left: 5px;
  margin-left: 15px;
}
.spe {
  display: inline-block;
  width: 5px;
  height: 28px;
  background-color: #20a0ff;
  position: absolute;
  bottom: 0;
  left: 0;
}

.zhezhao {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.zhezhao .box {
  width: 800px;
  height: 250px;
  background-color: #fff;
  margin: 0 auto;
  border: 1px solid black;
}

::v-deep .custom-header {
  background-color: #f5f7fa !important;
  color: #606266;
  font-weight: bold;
}
</style>